<template>
  <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">

    <!-- 主要内容 -->
    <el-main>
      <el-header>
        <el-col :span="6">
          <span>项目编号：{{ formData.projectCode }}</span>
        </el-col>
        <el-col :span="6">
          <span>项目名称：{{ formData.projectName  }}</span>
        </el-col>
        <el-col :span="6">
          <span v-if="formData.purchaseCategoryId === '1' ">采购类别：货物类</span>
          <span v-else-if="formData.purchaseCategoryId === '2'">采购类别：服务类</span>
          <span v-else-if="formData.purchaseCategoryId === '3'">采购类别：工程类</span>
          <span v-else>采购类别：其他采购类别</span>
        </el-col>
        <el-col :span="6">
          <span>预算金额：{{ formData.budget }}元</span>
        </el-col>
      </el-header>

      <!-- 表格内容 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column v-if="false" prop="id" label="序号"></el-table-column>
        <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
        <el-table-column prop="contact" label="联系人"></el-table-column>
        <el-table-column prop="telephone" label="联系电话"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination class="pagination-container"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="totalItems"
      ></el-pagination>

      <!-- 审批状态 -->
      <div class="showCurrentStatus" v-if="formData">
        <strong>当前审批状态:</strong>  {{ formData.potentialsupplierApproveStatus }}
      </div>


      <!-- 审批意见 -->
      <el-form>
        <el-form-item  class="inputApproval" label="审批意见:">
          <el-input v-model="potentialsupplierSuggestion" type="textarea" rows="4" placeholder="请输入审批意见"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-left: 220px;margin-top: 30px;">
            <span>
            <el-button type="primary" @click="approve" :disabled="formData.potentialsupplierApproveStatus === '审批通过' || formData.potentialsupplierSubmitStatus === '未提交'">审批通过</el-button>
            </span>
        <span style="margin-left: 40px;">
            <el-button type="primary" v-if="canCancel" @click="cancel" :disabled="formData.supplyerApproveStatus === '审批通过' ">审批退回</el-button>
            </span>
        <span style="margin-left: 40px;">
              <!-- 返回按钮 -->
              <el-button  @click="goBack" type="primary">返回</el-button>
            </span>
      </div>
    </el-main>
  </div>
</template>

<script>
import JSZip from 'jszip';
import FileSaver from 'file-saver';
import { accApproved } from "@/api/acceptanceApproval/acceptanceApproval.js";
import { accCancel } from "@/api/acceptanceApproval/acceptanceApproval.js";
import { selectAlltableData }from "@/api/acceptanceApproval/acceptanceApproval.js";
import request from "@/utils/request";
import {
  ApprovePotentialSuppliers,
  RejectPotentialSuppliers,
  selectAllPotentialSuppliers
} from "@/api/potentialSuppliers/potentialSuppliers";

export default {
  data() {
    return {
      //保存传递过来的数据
      formData: {
        projectCode: '',
        projectName: '',
        categoryName: '',
        budget: '',
        supplyerApproveStatus:'',
        projectId:'',
        potentialsupplierSubmitTime:'',
        potentialsupplierSubmitStatus:'',
        potentialsupplierSuggestion:'',
        potentialsupplierApproveStatus:'',
        potentialsupplierApproveP:'',
        potentialsupplierApproveTime:'',
      },
      rules: {
        contact: [{required: true, message: '请输入', trigger: ['blur', 'change']}],
        telephone: [{required: true, message: '请输入', trigger: ['blur', 'change']}],
        supplierName: [{required: true, message: '请输入', trigger: ['blur', 'change']}],
      },
      //table表格里的新数据,此处添加的值仅为测试值，上线代码前请将其删除
      tableData: [
        // {
        //   id:'1',
        //   profileName: '到货验收资料',
        //   filePath:'',
        //   uploadTime: '2023-07-26 12:34:56',
        // },
        // 可以添加更多的初始数据项
      ],
      //分页
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      // 用于存储审批注释的新数据属性
      potentialsupplierSuggestion: '',

    };
  },

  created() {
    // 接收路由传递的数据
    this.formData.projectCode = this.$route.params.projectCode;
    this.formData.projectName = this.$route.params.projectName;
    this.formData.purchaseCategoryId = this.$route.params.purchaseCategoryId;
    this.formData.budget = this.$route.params.budget;
    this.formData.supplyerApproveStatus = this.$route.params.supplyerApproveStatus;
    this.formData.potentialsupplierSubmitTime = this.$route.params.potentialsupplierSubmitTime;
    this.formData.potentialsupplierSubmitStatus = this.$route.params.potentialsupplierSubmitStatus;
    this.formData.potentialsupplierSuggestion = this.$route.params.potentialsupplierSuggestion;
    this.formData.potentialsupplierApproveStatus = this.$route.params.potentialsupplierApproveStatus;
    this.formData.potentialsupplierApproveP = this.$route.params.potentialsupplierApproveP;
    this.formData.potentialsupplierApproveTime = this.$route.params.potentialsupplierApproveTime;
    this.formData.projectId = this.$route.params.projectId;

    this.selectTableData()
  },

  methods: {

    //初始化tableData里的数据
    async selectTableData() {
      let data = this.formData.projectId+'/'+this.currentPage + '/' + this.pageSize;
      try {
        const response = await selectAllPotentialSuppliers(data);
        this.tableData = response.data.data.record;
        this.totalItems = this.tableData.length;
      } catch (error) {
        console.error('Error fetching supplier data:', error);
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.selectAddPotentialSuppliers()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.selectAddPotentialSuppliers()
    },


    //审批通过
    async approve() {
      if(this.formData.potentialsupplierSubmitStatus === '已提交') {
        // 发出事件以更新index中的审批状态
        this.$confirm('确认通过审批吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let data = {projectId: this.formData.projectId, potentialsupplierSuggestion: this.potentialsupplierSuggestion}
          let res = await ApprovePotentialSuppliers(data)
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '通过成功!'
            });
            this.formData.potentialsupplierApproveStatus = '审批通过';
            // 审批后重置审批意见输入字段
            this.potentialsupplierSuggestion = '';

          } else {
            this.$message.error(res.data.msg)
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }else {
        this.$message.error("请确认验收审批提交状态");
      }
    },

    canCancel() {
      // 检查审批状态是否已为“审批通过“或者如果”审批通过”按钮
      return this.formData && this.formData.potentialsupplierApproveStatus === '审批通过';
    },


    //审批退回
    async cancel() {
      if(this.formData.potentialsupplierSubmitStatus === '已提交') {
        // 发出事件以更新index中的审批状态
        this.$confirm('确认退回审批吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let data = {projectId: this.formData.projectId, potentialsupplierSuggestion: this.potentialsupplierSuggestion}
          let res = await RejectPotentialSuppliers(data)
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '退回成功!'
            });
            this.formData.potentialsupplierApproveStatus = '退回';
            // 审批后重置审批意见输入字段
            this.potentialsupplierSuggestion = '';
            this.formData.potentialsupplierSubmitStatus = '未提交';
          } else {
            this.$message.error(res.data.msg)
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }else{
        this.$message.error("不可退回，请确认归档审批提交状态")
      }
    },

    //当点击返回按钮，返回到potentialSuppliers页面
    goBack() {
      this.$router.push('potentialSuppliersApproval');
    },
  },

};
</script>

<style>
.showCurrentStatus{
  margin-top: 30px;
}

.inputApproval{
  margin-top: 30px;
}

</style>

